<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';

import { gethVehicle } from '@/apis/vehicles';

import VehicleDetailBasisInfo from '@/pages/vehicles/components/VehicleDetailBasicInfo.vue';
import VehicleDetailVehicle from '@/pages/vehicles/components/VehicleDetailVehicle.vue';
import VehicleDetailRenderings from '@/pages/vehicles/components/VehicleDetailRenderings.vue';
import VehicleDetailMosaic from '@/pages/vehicles/components/VehicleDetailMosaic.vue';

const route = useRoute();

const model = ref<any>({});

// 顶部面包屑
const breadcrumbs = ref<string[]>([]);

watchEffect(async () => {
    const { id, productType, ancestors } = route.query;
    (ancestors as string[]).shift();
    breadcrumbs.value = ancestors as string[];
    const { data } = await gethVehicle({
        data: {
            carId: Number(id),
            // carId: 2440,
            productId: productType,
        },
    });
    model.value = data;
});
</script>

<template>
    <div class="flex flex-col h-full overflow-auto overscroll-contain">
        <div class="flex items-center gap-x-2 px-80 py-6 bg-white">
            当前位置:
            <a-breadcrumb separator="<">
                <template v-for="item in breadcrumbs" :key="item">
                    <a-breadcrumb-item class="!text-gray-600">{{
                        item
                    }}</a-breadcrumb-item>
                </template>
            </a-breadcrumb>
        </div>
        <VehicleDetailBasisInfo :data="model" />
        <VehicleDetailVehicle :data="model" />
        <VehicleDetailRenderings :data="model" />
        <VehicleDetailMosaic :data="model" />
    </div>
</template>

<style lang="scss" scoped></style>
